<script setup lang="ts">

const option = {
  color: 'transparent',
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#666',
      fontSize: 8,
      rotate: 45,
    },
    data: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六', '类型七', '类型八', '类型九', '类型十'],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
    axisLable: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    min: 10,
    axisLabel: {
      color: '#999',
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#666',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  series: [
    {
      data: [28, 20, 18, 16, 20, 16, 20, 26, 38, 20],
      type: 'bar',
      showBackground: true,
      barWidth: 10,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 1, color: '#267dde', // 0% 处的颜色
        }, {
          offset: 0, color: '#30d7e9', // 100% 处的颜色
        }],
      },
      label: {
        offset: [-30, 40],
      },
      itemStyle: {
        borderRadius: 0,
      },
    },
  ],
};
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
  />
</template>

<style scoped>
</style>
